<template>
  <div class="policy-table-container">
    <div class="table-header">
      <h3>政策列表</h3>
      <el-button @click="$emit('refresh')" :icon="Refresh" size="small">
        刷新
      </el-button>
    </div>
    
    <el-table :data="policies" style="width: 100%" v-loading="loading">
      <el-table-column prop="policyId" label="ID" width="80" />
      <el-table-column prop="policyType" label="类型" width="120">
        <template #default="{ row }">
          <el-tag :type="row.policyType === 'user_agreement' ? 'primary' : 'success'">
            {{ row.policyType === 'user_agreement' ? '用户协议' : '隐私政策' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="version" label="版本" width="100" />
      <el-table-column prop="content" label="内容预览" min-width="300">
        <template #default="{ row }">
          <div class="content-preview" v-html="getContentPreview(row.content)"></div>
        </template>
      </el-table-column>
      <el-table-column prop="publishDate" label="发布日期" width="150">
        <template #default="{ row }">
          {{ formatDate(row.publishDate) }}
        </template>
      </el-table-column>
      <el-table-column prop="isActive" label="状态" width="100">
        <template #default="{ row }">
          <el-tag :type="row.isActive ? 'success' : 'info'">
            {{ row.isActive ? '已发布' : '未发布' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" fixed="right">
        <template #default="{ row }">
          <el-button size="small" @click="$emit('edit', row)">
            编辑
          </el-button>
          <el-button 
            v-if="!row.isActive" 
            size="small" 
            type="success" 
            @click="$emit('publish', row.policyId)"
          >
            发布
          </el-button>
          <el-button 
            v-else 
            size="small" 
            type="warning" 
            @click="$emit('deactivate', row.policyId)"
          >
            停用
          </el-button>
          <el-button 
            size="small" 
            type="danger" 
            @click="$emit('delete', row.policyId)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <div v-if="policies.length === 0" class="empty-state">
      <el-empty description="暂无政策数据" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Refresh } from '@element-plus/icons-vue'

// Props
const props = defineProps({
  policies: {
    type: Array,
    default: () => []
  }
})

// Emits
const emit = defineEmits(['refresh', 'edit', 'publish', 'deactivate', 'delete'])

// 响应式数据
const loading = ref(false)

// 方法
const getContentPreview = (content) => {
  if (!content) return '无内容'
  
  // 移除HTML标签，获取纯文本
  const textContent = content.replace(/<[^>]*>/g, '')
  
  // 截取前100个字符
  if (textContent.length <= 100) {
    return textContent
  }
  
  return textContent.substring(0, 100) + '...'
}

const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN')
}

// 生命周期
onMounted(() => {
  // 组件挂载后的初始化逻辑
})
</script>

<style scoped>
.policy-table-container {
  width: 100%;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.table-header h3 {
  margin: 0;
  color: #303133;
}

.content-preview {
  max-height: 60px;
  overflow: hidden;
  line-height: 1.5;
  color: #606266;
}

.empty-state {
  padding: 40px 0;
  text-align: center;
}

:deep(.el-table) {
  border-radius: 4px;
}

:deep(.el-table th) {
  background-color: #f5f7fa;
  color: #303133;
  font-weight: 600;
}

:deep(.el-table td) {
  padding: 12px 0;
}

:deep(.el-button + .el-button) {
  margin-left: 8px;
}
</style> 